@import 'reset';
// @import './modules/header';
// @import './modules/footer';

header{
width:100%;
height:50px;
line-height: 50px;
background: #000;
.top-l{
  float: left;
  width:60%;
  color: #fff;
  padding-left: 20px;
  span{
    padding: 5px 5px;
    cursor: pointer;
  }
  span.call:hover {
    background: #02a7e0;
    color: #fff;
  }
  span:first-child {
    margin-right: 10px;
  }
}
 .top-r {
    width: 36%;
    float: right;
    margin-right: 20px;
  ol{
    float: right;
  }
  li{
    float: left;
    position: relative;
    height: 50px;
  }
  a{
    color:white;
  }
  li:nth-child(5){
    margin-right: 0px;
    width: 120px;
    span{
      position: absolute;
      right: 20px;
    }
    img{
      position: absolute;
      top:12px;
      right:70px;
    }
  }
  li:nth-child(4){
    width: 85px;
  }
  li:nth-child(3){
    width: 103px;
  }
  li:nth-child(2){
    width: 56px;
  }
  li:nth-child(2) b{
    margin-left: 16px;
  }
  li:nth-child(1){
    width: 56px;
  }
  li:nth-child(1) b{
    margin-left: 14px;
  }
}

 #nav{
   padding:10px 0;
   overflow: hidden;
   #nav-logo{
     margin-top:12px;
     margin-left: 60px;
     float: left;
   }
   .nav{
      width: 740px;
      float: left;
      overflow: hidden;
      margin-left: 34px;
      ul{
        overflow: hidden;
        li{
          float: left;
          margin: 20px 7px;
          a{
            font-size: 16px;
            margin: 4px;
            line-height: 30px;
            color: #333333;
          }
        }
        li.hover{
          border-bottom: 2px #00a1e1 solid;
        }
      }
   }
   #nav-search {
    width: 256px;
    float: right;
    border: 1px #ccc solid;
    background: #fff;
    margin-right: 20px;
    margin-top: 12px;
    input {
      line-height: 50px;
      border: none;
      border-right: 1px #ccc solid;
      padding-left: 1em;
      width: 190px;
      font-size: 15px;
      height: 50px;
  }
  button {
    background-color: white;
    border: none;
    background-size: 32px;
    width: 40px;
    height: 40px;
    float: right;
    margin: 5px;
}
 }

 }
}
/* 头部CSS已完成 */

.banner{
  overflow: hidden;
  height: 460px;
  margin-top:130px;
  position: relative;
  .swiper-button-prev{
    margin-left:220px;
  }
  a img{
    height:100%;
    width:auto;
  }
  .nav-left{
    position: absolute;
    left: 0;
    top:0px;
    z-index: 9;
    height: 460px;
    width: 220px;
    background: rgba(53, 53, 53, 0.5);
    ul{
      padding-top: 20px;
      position: relative;
      z-index: 99;
      a{
          color:#fff;
         }
      li{
        background: url(../images/li-left.png) no-repeat right 10px center;
        color:#fff;
        padding: 13px 25px;
        // width: 220px;
        // 
      }
      li:hover {
        color: #24272D;
        background: url(../images/lihover.png) no-repeat right 10px center #fff;
        // background-color: #fff;
        background-size: 8px;
        cursor: pointer;
        
    }
    }
    ul li a:hover {
      color: #24272D;
  }
  }
}

/* 轮播图css已完成 */

.hot{
  margin:20px auto;
  overflow: hidden;
  .hot-l{
    float:left;
    width:75%;
    ul{
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 900px;
      li{
        position: relative;
        padding:14px 20px;
        width:247px;
        float:left;
        color:#fff;
        border: 1px #dbdbdb solid;
        h5{
          font-size:20px;
          text-align: center;
          font-weight: 500;
          line-height: 40px;
        }
        p{
          padding:0px 9px;
          font-size:16px;
          line-height: 20px;
          margin-top:20px;
        }
        span{
          display:block;
          text-align: center;
          color: #078dcc;
          font-size: 18px;
          margin-top: 20px;
        }
        img{
          position: relative;
          bottom: 0;
          width: 100%;
          margin-top: 13px;
        }
      }
    }
    li:nth-child(1) {
      background: url(../images/orange-bg.png) repeat;
    }
    li:nth-child(2) {
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b1bbdb), to(#ccd4e5));
      background: -moz-linear-gradient(bottom, #b1bbdb, #ccd4e5);
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b1bbdb), to(#ccd4e5));
      background: -o-linear-gradient(bottom, #b1bbdb, #ccd4e5);
    }
    li:nth-child(3) {
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#78a866), to(#9ec668));
      background: #fff; /* 一些不支持背景渐变的浏览器 */
      background: -moz-linear-gradient(bottom, #78a866, #9ec668);
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#78a866), to(#9ec668));
      background: -o-linear-gradient(bottom, #78a866, #9ec668);
    }
    li:last-child{
      margin-right: 0px;
    }
    li:hover, .part-lis-l:hover, .part-lis-r li:hover {
      top: -2px;
      box-shadow: 0 0 20px #969696;
  }
  }
  .hot-r {
    width:281px;
    float:right;
    .sm{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      h6{
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        color: #fff;
        line-height: 50px;
      }
      p{
        color: #fff;
        text-align: center;
      }
      img{
        height: 100px;
        width: auto;
      }
    }
    .sm:nth-child(1){
      background: url(../images/gray-bg.png) repeat center;
      margin-bottom: 10px;
    }
    .sm:nth-child(2){
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#bcb4a0), to(#bcb4a0));
      background: #fff; /* 一些不支持背景渐变的浏览器 */
      background: -moz-linear-gradient(bottom, #bcb4a0, #bcb4a0);
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#bcb4a0), to(#bcb4a0));
      background: -o-linear-gradient(bottom, #bcb4a0, #bcb4a0);
      margin-top: 28px;
    }
    .sm:hover {
      top: -2px;
      box-shadow: 0 0 20px #969696;
    }
  }
}

/* hot css已完成 */

.part {
  overflow: hidden;
  margin-top:30px;
  position: relative;
  .title {
    overflow: hidden;
    font-size:30px;
    line-height: 60px;
    a {
      font-size: 14px;
      float:right;
      margin-right: 40px;
      padding-right: 25px;
      background: url(../images/more.png) no-repeat right center;
    }
  }
  .part-lis{
    margin-top:10px;
    overflow: hidden;
    .part-lis-l:hover{
      top: -2px;
      box-shadow: 0 0 20px #969696;
    }
    .part-lis-l{
      width: 187px;
      margin-right: 20px;
      background: #fff;
      border: 1px #dbdbdb solid;
      padding: 40px 22px 0 22px;
      position: relative;
      float: left;
      height: 517px;
      h5{
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        margin-top: 38px;
      }
      p{
        margin-top: 39px;
        line-height: 20px;
        color: #b0b0b0;
        text-align: center;
      }
      span{
        display: block;
        color: #078dcc;
        text-align: center;
        font-size: 18px;
        margin-top: 59px;
      }
      .plimg{
        margin-top: 88px;
      }
      .plimg img{
        width: 100%;
        height: auto;
      }
    }
    .part-lis-r {
      height: 608px;
      width: 946px;
      float:right;
      li:hover{
        top: -2px;
        box-shadow: 0 0 20px #969696;
      }
      li{
        margin-right: 20px;
        width: 199px;
        background: #fff;
        border: 1px #dbdbdb solid;
        padding: 11px 10px;
        margin-bottom: 26px;
        position: relative;
        float: left;
        u{
          position: absolute;
          top: 0;
          width: 60px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          left: 50%;
          margin-left: -30px;
        }
      }
      li:nth-child(4n) {
        margin-right: 0;
    }
      .plimg {
        margin-top:10px;
        text-align: center;
        height: 100px;
        width: 100%;
        float:none;
        img{
          width:80%;
          height: auto;
        }
      }
      h5{
        font-size: 20px;
        text-align: center;
        font-weight: 500;
        margin: 15px 0;
      }
      p{
        margin: 0 15px;
        color: #b0b0b0;
        text-align: center;
      }
      span{
        display: block;
        text-align: center;
        color: #078dcc;
        margin-top: 20px;
        padding-bottom: 10px;
        font-size: 18px;
      }
    }
  }
}


.swiper2-container {
  width: 100%;
  .swiper-slide{
    height: 245px;
    float: left;
    width: 50%;
    margin-bottom: 10px;
    .new-l {
      height: 125px;
      width:120px;
      align-items: center;
      padding: 60px 40px;
      float:left;
      .line{
        background: #fff;
        width:100%;
        height:3px;
      }
      h3{
        text-align: center;
        width:100%;
        color:#fff;
        font-size: 20px;
        font-weight: 500;
        word-wrap: break-word;
      }
      p{
        line-height: 20px;
        color:#fff;
      }
    }
    .new-r {
      width:390px;
      height: 245px;
      float: left;
      text-align: center;
      img{
        width: auto;
        height:170px;
        margin-top:44px;
      }
    }
  }
  .swiper-slide:nth-child(1) .new-l {
    background: #67b687;
  }
  .swiper-slide:nth-child(1) .new-r {
    background: #d8e6de;
  }
  .swiper-slide:nth-child(2) .new-l {
    background: #dcd16f;
  }
  .swiper-slide:nth-child(2) .new-r {
    background: #e9e4ca;
  }
  .swiper-slide:nth-child(3) .new-l {
    background: #d78e28;
  }
  .swiper-slide:nth-child(3) .new-r {
    background: #e6d1b9;
  }
  .swiper-slide:nth-child(4) .new-l {
    background: #866350;
  }
  .swiper-slide:nth-child(4) .new-r {
    background: #ccbdb3;
  }
  .swiper-slide:nth-child(5) .new-l {
    background: #5a5665;
  }
  .swiper-slide:nth-child(5) .new-r {
    background: #aeabb3;
  }
  .swiper-slide:nth-child(6) .new-l {
    background: #498c94;
  }
  .swiper-slide:nth-child(6) .new-r {
    background: #bed7db;
  }  
  .swiper-slide:nth-child(7) .new-l {
    background: #67b687;
  }
  .swiper-slide:nth-child(7) .new-r {
    background: #d8e6de;
  }
  .swiper-slide:nth-child(8) .new-l {
    background: #dcd16f;
  }
  .swiper-slide:nth-child(8) .new-r {
    background: #e9e4ca;
  }
  .swiper-slide:nth-child(9) .new-l {
    background: #d78e28;
  }
  .swiper-slide:nth-child(9) .new-r {
    background: #e6d1b9;
  }
  .swiper-slide:nth-child(10) .new-l {
    background: #866350;
  }
  .swiper-slide:nth-child(10) .new-r {
    background: #ccbdb3;
  }
  .swiper-slide:nth-child(11) .new-l {
    background: #5a5665;
  }
  .swiper-slide:nth-child(11) .new-r {
    background: #aeabb3;
  }
  .swiper-slide:nth-child(12) .new-l {
    background: #498c94;
  }
  .swiper-slide:nth-child(12) .new-r {
    background: #bed7db;
  }
  .swiper-wrapper {
    height:100%;
    overflow: hidden;
    display: none;
  }
  .swiper-wrapper.hover {
    display:block;
  }
  .pn {
    position:absolute;
    right:26px;
    top:0px;
    .swiper2-button-prev.swiper-button-disabled {
      background: url(../images/prev.png) no-repeat center;
    }
    .swiper2-button-next.swiper-button-disabled {
      background: url(../images/next.png) no-repeat center;
    } 
    .swiper2-button-prev {
      background: url(../images/prev-hover.png) no-repeat center;
    }
    .swiper2-button-next {
      border-left: none !important;
      background: url(../images/next-hover.png) no-repeat center;
    }
  }
  .pn > div{
    width: 46px;
    height: 24px;
    border: 1px #ccc solid;
    cursor: pointer;
    float: left;
  }
}

/* part css 已完成*/

#footer {
  border-top:1px #fff solid;
  width:100%;
  margin-top: 50px;
  padding-top: 50px;
  border-bottom: 1px #fff solid;
  padding-bottom: 50px;
  .footer{
    width:1200px;
    margin:0 auto;
    overflow: hidden;
    ul{
      width:813px;
      margin-left:20px;
      float:left;
      li{
        width:120px;
        float:left;
        h5{
          font-size:18px;
          width:100%;
          margin-bottom:20px;
        }
        a{
          display:block;
          width:100%;
          line-height: 30px;
        }
      }
    }/* ul结束 */
    .eqr {
      width:310px;
      float:right;
      overflow: hidden;
      h6{
        padding-left: 38px;
        margin-bottom: 10px;
        text-align: left;
      }
      .wb{
        background: url(../images/wb.png) no-repeat left 5px center;
      }
      .wx{
        background: url(../images/wx.png) no-repeat left 3px center;
      }
      p{
        font-size: 12px;
        text-align: center;
        color: #999;
      }
      .eqr-wb {
        text-align: center;
        width: 120px;
        float: left;
    }
    .eqr-wx {
      width: 120px;
      text-align: center;
      float: right;
    }

    }
    /* eqr 结束 */
  }/* footer结束 */
}
  .sevice {
    margin:40px auto;
    width: 1000px;
    overflow: hidden;
    .mycall{
      line-height: 30px;
      float: left;
      .s01{
        color: #02a7e0;
        font-size: 18px;
      }
      .s02 {
        font-size: 20px;
        color: #02a7e0;
        margin: 0 10px;
      }
      .s03 {
        font-size: 16px;
        color: #02a7e0;
        border: 1px #02a7e0 solid;
        padding: 3px 5px;
        margin-left: 15px;
      }
      span.s03:hover {
        background: #02a7e0;
        color: #fff;
        cursor: pointer;
      }
    }
    .share {
      float: right;
  }
  }
  .power {
    width: 1200px;
    margin: 40px auto;
    padding-left: 120px;
    background: url(../images/logo2.png) no-repeat left center;
}
  .online {
    position: fixed;
    width:40px;
    background: #000;
    top:0;
    right:0px;
    padding: 100px 0 0 0;
    z-index:9;
    li{
      width:40px;
      position: relative;
      margin:0 auto;
      margin: 30px  0;
      z-index:99;
      a{
        display: block;
        font-size: 16px;
        text-align: center;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        position: relative;
      }
      a:hover::before {
        content: "";
        left: -5px;
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        background: rgb(0, 0, 0);
        transform: rotate(45deg);
        top: 15px;
    }
    }
    li.ttop{
      margin-bottom: 10px;
    }
    li.mycar{
      background: url(../images/car.png) no-repeat top 20px center;
      padding-top: 50px;
      background-color: #424242;
    }
    li.mycar:hover {
      background-color: #078dcc;
    }
    li.mycar a {
      width: 20px;
      height: auto;
      margin-top: 13px;
      color: #fff;
      padding-bottom: 24px;
    }
    li.mycar a:hover {
      background: none !important;
    }
    li.mycar a:hover::before {
      display: none !important;
      ;
    }
    li:hover {
      background-color: #078dcc !important;
    }
    li:hover p, .online li:hover div {
      display: block;
      z-index: 9;
    }
    li.my a {
      background: url(../images/my.png) no-repeat center;
    }
    li.wish a {
      background: url(../images/wish.png) no-repeat center;
    }
    li.order a {
      background: url(../images/order.png) no-repeat center;
    }
    li.ewm a {
      background: url(../images/menu.png) no-repeat center;
    }
    li.ttop a {
      background: url(../images/top.png) no-repeat center;
    }
    li.ewm a:hover::before {
      background-color: #fff;
    }
    li p{
      left: -96px;
      position: absolute;
      top: 0;
      padding: 0 20px;
      background: #000;
      color: #fff;
      height: 40px;
      line-height: 40px;
      display: none;
    }
    li div {
      left: -96px;
      position: absolute;
      top: 0;
      padding: 0 20px;
      background: #000;
      color: #fff;
      height: 40px;
      line-height: 40px;
      display: none;
      width: 200px;
     }
    li div {
      padding: 24px;
      background: #fff;
      left: -252px;
      top: -134px;
      text-align: center;
      height: 126px;
    }
    li div img {
      position: relative;
      width: 92px;
      border: 1px #ccc solid;
    }
    li div span {
      float: left;
      width: 95px;
      padding-left: 5px;
      color: black;
    }
    li div p {
      background: #fff;
      position: relative;
      text-align: center;
      left: 0;
      top: 0;
      line-height: 24px;
      height: 24px;
      color: #000;
    }
  }